<template>
  <div class="model_fcfc_box">
    <div class="model_fcfc_options">
      <el-button type="primary" size="default" @click="loadModel">3DTILES模型</el-button>
    </div>
    <div v-if="isShowControlButton" class="opration_button_box">
      <el-button class="com_button" type="primary" size="default" @click="modelControl">楼层控制</el-button>
<!--      <el-button class="com_button" type="primary" size="default" @click="">模型炸开</el-button>-->
    </div>
    <div class="floor_box" v-if="isShowFloorControl">
      <span style="color: #409eff;font-size: 30px;">楼层(改变层颜色)</span>
      <div>
        <el-button
            type="primary"
            class='floor_single'
            v-for="(item,index) in floorList"
            @click="floorButtonClick(item)"
            :key="index">{{ item.name }}
        </el-button>
      </div>
      <el-divider></el-divider>
      <span style="color: #409eff;font-size: 30px;">楼层(单独展示层)</span>
      <div>
        <el-button
            type="primary"
            class='floor_single'
            v-for="(item,index) in floorList"
            @click="showFloorButtonClick(item)"
            :key="index">{{ item.name }}
        </el-button>
      </div>

      <el-divider></el-divider>
      <span style="color: #409eff;font-size: 30px;">楼层(从单栋建筑物抽出)</span>
      <span style="color: red;font-size: 12px;">方式1：影子法，在旁边加载一个副模型。分开控制</span>
      <!-- <span style="color: #ffffff;font-size: 12px;">方式2：</span>-->
      <div>
        <el-button
            type="primary"
            class='floor_single'
            v-for="(item,index) in floorList"
            @click="modelDrawer(item)"
            :key="index">{{ item.name }}
        </el-button>
      </div>
    </div>
    <div style="width: 100%;height: 100%;" class="map_content" id="map_content"></div>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, ref, watch} from "vue";
import {initMap} from "./js/initMap";
import fchouse from './js/fcHouse';

const isShowControlButton = ref(false);
const cviewer: any = ref(undefined);
const isShowFloorControl=ref(false);
const floorList = ref([
  {"name": "F1", "id": 1, "value": "AF1 (0.000)"},
  {"name": "F2", "id": 2, "value": "AF2 (3.150)"},
  {"name": "F3", "id": 3, "value": "AF3 (6.300)"},
  {"name": "F4", "id": 4, "value": "AF4 (9.450)"},
  {"name": "F5", "id": 5, "value": "AF5 (12.600)"},
  {"name": "F9", "id": 6, "value": "AF9 (25.200)"},
  {"name": "F12", "id": 7, "value": "AF12 (34.650)"},
  {"name": "F15", "id": 8, "value": "AF15 (44.100)"}
])
const modelControl=()=>{
  isShowFloorControl.value=! isShowFloorControl.value;
}
const floorButtonClick = (item: any) => {
  fchouse.changeTilesStyle(item.value);
}
const modelDrawer=(item:any)=>{
  fchouse.drawerFloor(item.value)
  fchouse.renderSecondModel({
    url: './model/tiles/fc-house/tileset.json',
    maximumScreenSpaceError: 16,
    position: {
      tx: 119.321,
      ty: 32.118,
      tz: 1
    }
  },item.value);
}
const showFloorButtonClick = (item: any) => {
  fchouse.showTilesBasicFllor(item.value);
}
const loadModel = (type: string) => {
  fchouse.load3dtiles(cviewer.value,
      'an',
      {
    url: './model/tiles/fc-house/tileset.json',
    maximumScreenSpaceError: 16,
    position: {
      tx: 119.318,
      ty: 32.119,
      tz: 1
    }
  })
  setTimeout(() => {
    isShowControlButton.value = true;
  }, 800)
}

onMounted(() => {
  cviewer.value = initMap("map_content", [0, 0, 0, 0]);
});
</script>

<style lang="scss" scoped>
.model_fcfc_box {
  width: 100%;
  height: 100%;

  .model_fcfc_options {
    margin: 10px;
    position: fixed;
    left: 20px;
    top: 20px;
    z-index: 1;
  }


  .floor_box {
    position: fixed;
    right: 20px;
    top: 100px;
    z-index: 1;
    margin-top: 10px;
    display: flex;
    align-items: center;
    flex-direction: column;
    border: 1px solid #ffffff;
    padding: 10px;
    border-radius: 4px;
    color: #ffffff;
  }

  .opration_button_box {
    position: fixed;
    right: 20px;
    top: 20px;
    z-index: 1;
    margin-top: 20px;
    display: flex;
  }

  .com_button {
    margin-top: 10px;
    width: 100px;
    margin-left: 10px;
  }

  .common_button {
    background-color: #fff;
  }

  .common_button_active {
    background-color: #22ee22;
  }
}
</style>
